<template>
  <div class="app-container">
    <div class="login">
      <div class="rightcard">
        <div class="iconfont-margin">
          <i class="iconfont">&#xe636;</i>
        </div>
        <h2>欢迎报名</h2>
        <el-form class="white" :model="form" :rules="rules" ref="myaddForm">
          <div class="contain-ti">
            <span class="span-ti">名字</span>
            <el-tooltip class="item" effect="dark" content="请输入真实姓名" placement="left">
              <el-form-item prop="username">
                <el-input placeholder="请输入名字" v-model="form.username" prop="username" maxlength="5"></el-input>
              </el-form-item>
            </el-tooltip>
          </div>
          <div class="contain-ti">
            <el-form-item prop="college">
              <span class="span-ti">学院</span>
              <el-select v-model="form.college" placeholder="请选择学院" @change="updataCollege()">
                <el-option v-for="(item,index) in form.collegeArr" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="contain-ti">
            <span class="span-ti">专业</span>
            <el-tooltip class="item" effect="dark" content="请先选择学院" placement="left">
              <el-form-item prop="major">
                <el-select placeholder="请选择专业" v-model="form.major">
                  <el-option v-for="(item,index) in form.majorArr" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-tooltip>
          </div>
          <div class="contain-ti">
            <span class="span-ti">班级</span>
            <el-tooltip class="item" effect="dark" content="例如:21级人工智能2班" placement="left">
              <el-form-item prop="classes">
                <el-input placeholder="请输入班级" v-model="form.classes"></el-input>
              </el-form-item>
            </el-tooltip>
          </div>
          <div class="contain-ti">
            <span class="span-ti">身份</span>
            <el-form-item prop="role">
              <el-select placeholder="请选择身份" v-model="form.role">
                <el-option label="学生" value="学生"></el-option>
                <el-option label="教师" value="教师"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="contain-ti">
            <span class="span-ti">手机号</span>
            <el-tooltip class="item" effect="dark" content="请输入11位手机号" placement="left">
              <el-form-item prop="mobilephone">
                <el-input placeholder="请输入手机号" v-model="form.mobilephone" maxlength="11"></el-input>
              </el-form-item>
            </el-tooltip>
          </div>
          <div class="contain-ti">
            <span class="span-ti">密码</span>
            <el-tooltip class="item" effect="dark" content="密码大于5位,小于18位" placement="left">
              <el-form-item prop="password">
                <el-input placeholder="请输入密码" v-model="form.password" maxlength="18"></el-input>
              </el-form-item>
            </el-tooltip>
          </div>
          <div class="buttons">
            <el-row>
              <el-button type="primary" round size="medium" @click="submitForm('ruleForm')"><div class="sumit">报名</div></el-button>
            </el-row>
          </div>
          <div class="hava" @click="havaAccount">已有账号?<span class="havaAccount"> 点击登录</span></div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getAddUsersAPI } from '@/api/AddUsersAPI'
export default {
  data() {
    const checkmobilePhone = (rule, value, callback) => {
      const phone =
        /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      if (!value.trim()) {
        callback(new Error('请输入手机号'))
      } else if (value.length !== 11) {
        callback(new Error('请输入11位正确手机号'))
      } else if (!phone.test(value)) {
        callback(new Error('请输入正确手机号'))
      } else {
        callback()
      }
    }
    return {
      form: {
        username: '', // 用户名
        college: '', // 学院
        major: '', // 专业
        classes: '', // 班级
        role: '', // 身份
        mobilephone: '', // 手机号
        password: '', // 密码
        collegeArr: [
          {
            name: '空港管理学院',
            major: [
              { name: '大数据与财务管理' },
              { name: '计算机应用技术' },
              { name: '虚拟现实应用技术' },
              { name: '电子商务' },
              { name: '人工智能技术服务' },
              { name: '移动互联应用技术' },
              { name: '机场运行服务与管理' },
              { name: '民航运输服务' },
              { name: '航空物流管理' }
            ]
          },
          {
            name: '空乘学院',
            major: [{ name: '空中乘务' }, { name: '高速铁路客运乘务' }]
          },
          {
            name: '空保学院',
            major: [{ name: '民航空中安全保卫' }]
          },
          {
            name: '民航安全学院',
            major: [
              { name: '应急救援技术' },
              { name: '航空油料' },
              { name: '民航安全技术管理' }
            ]
          },
          {
            name: '机务学院',
            major: [
              { name: '直升机驾驶技术' },
              { name: '定翼机驾驶技术' },
              { name: '飞行器数字化制造技术' },
              { name: '无人机应用技术' },
              { name: '飞机机电设备维修' },
              { name: '通用航空航务技术' },
              { name: '通用航空器维修' }
            ]
          },
          {
            name: '五专学院',
            major: [
              { name: '无人机操控与维护' },
              { name: '智慧健康养老服务' },
              { name: '电子技术应用' },
              { name: '铁道运输服务' },
              { name: '民航运输服务' },
              { name: '飞机设备维修' },
              { name: '航空服务' },
              { name: '旅游服务与管理' }
            ]
          }
        ],
        majorArr: [] // 专业的数据
      },
      rules: {
        username: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        college: [
          { required: true, message: '请输入选择学院', trigger: 'blur' }
        ],
        // 自定义的校验
        mobilephone: [{ validator: checkmobilePhone, trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 18, message: '密码大于5位,小于18位', trigger: 'blur' }
        ],
        classes: [{ required: true, message: '请输入班级', trigger: 'blur' }],
        major: [{ required: true, message: '请选择专业', trigger: 'blur' }],
        role: [{ required: true, message: '请选择专业', trigger: 'blur' }]
      }
    }
  },

  methods: {
    updataCollege() {
      this.form.collegeArr.forEach((item) => {
        if (item.name === this.form.college) {
          this.form.majorArr = item.major
        }
      })
    },
    submitForm(formName) {
      this.$refs.myaddForm.validate(async(valid) => {
        if (!valid) return
        const { data: res } = await getAddUsersAPI(
          this.form.username,
          this.form.college,
          this.form.major,
          this.form.classes,
          this.form.mobilephone,
          this.form.password,
          this.form.role
        )
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: '报名成功',
            type: 'success'
          })
          this.$router.replace('/login')
        } else if (res.code === 501) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'warning'
          })
        } else if (res.code === 502) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'warning'
          })
        } else if (res.code === 504) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    havaAccount() {
      this.$router.replace('/login')
    }
  },
  components: {}
}
</script>
<style lang="less" scoped>
html {
  font-family: 'Orbitron', sans-serif;
}
* {
  margin: 0;
  padding: 0;
}

input {
  border: none;
  outline: white;
  width: 100%;
}
.sumit {
  width: 50px;
  height: 15px;
}
.btn {
  display: block;
  width: 200px;
}
.havaAccount {
  color: black;
  cursor: pointer;
  transition: 0.5s;
}
.havaAccount:hover {
  color: #032B73;
}
.hava {
  position: relative;
  left: 1.75vw;
}
// select {
//   border: none;
//   outline: white;
//   width: 100%;
//   border-radius: 20px;
// }

.el-input {
  margin-bottom: 17px;
}

.el-input ::v-deep .el-input__inner {
  width: 110%;
}

::v-deep .el-input__inner {
  border: none;
  outline: white;
  height: 100%;
  margin: 10px;
  width: 80%;
  margin-right: 10%;
  padding: 0 0px;
}

::v-deep .el-form-item__content {
  height: 5vh;
  line-height: 0px;
}

::v-deep .el-select-dropdown__item.selected span {
  color: black;
}
@font-face {
  font-family: 'iconfont'; /* Project id 3771308 */
  src: url('//at.alicdn.com/t/c/font_3771308_tp69a8l3uv.woff2?t=1668481571675')
      format('woff2'),
    url('//at.alicdn.com/t/c/font_3771308_tp69a8l3uv.woff?t=1668481571675')
      format('woff'),
    url('//at.alicdn.com/t/c/font_3771308_tp69a8l3uv.ttf?t=1668481571675')
      format('truetype');
}

.iconfont-margin {
  margin-top: 4rem;
  margin-bottom: 10px;
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 35px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  // background: linear-gradient(to bottom right, #09C6F9,#045DE9);
  // border-radius: 50%;169
  background-color: #032b73;
}
.login {
  width: 35%;
  height: 94vh;
  // background-color: aqua;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  border-radius: 30px;
  background-color: white;
}

.rightcard-top h2 {
  font-size: 25px;
  margin-top: 20px;
}
.rightcard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
}

.contain-ti {
  display: flex;
  height: 40px;
  margin-top: 29px;
  border: 3px solid #032b73;
  border-radius: 10px;
}
.span-ti {
  position: absolute;
  font-size: 13px;
  background: white;
  margin: -10px0 0 10px;
  padding: 0 5px;
  color: rgb(144, 147, 167);
}
.input-style {
  margin: auto 5px;
}
.white {
  // height: 100px;
  // padding: 105px;
  margin-bottom: 80px;
}
.buttons {
  margin-top: 20px;
  margin-left: 60px;
}
</style>
